<template>
  <v-chart
    ref="chartEntityRef"
    class="w-full h-full overflow-hidden"
    v-bind="$attrs"
    :option="option"
    autoresize
  />
</template>
<script lang="ts" setup>
import "echarts";
import type { Ref } from "vue";

import VChart from "vue-echarts";

const props = defineProps({
  option: { type: Object, default: () => defaultOptions },
});

// 透传 attrs、listeners
const $attrs = useAttrs();

const chartEntityRef: Ref<InstanceType<typeof VChart> | null> = ref(null);

const getEntity = () => {
  return chartEntityRef.value;
};

// TODO: theme change
// const { state } = useStore();
// const emits = defineEmits(["themeChange"]);
// watch(
//   () => state.app.isDarkMode,
//   () => {
//     emits("themeChange", state.app.isDarkMode);
//   },
//   {
//     immediate: true,
//   }
// );

defineExpose({ getEntity });
</script>
<script lang="ts">
const defaultOptions = readonly({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
});
export default {
  inheritAttrs: false,
};
</script>
<style lang="scss" scoped></style>
